<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { allStat, nodeAllList, teacherCourse } from '@/api/teacher'

const queryParam = ref({
	courseId: '',
	classNo: '',
	status: '',
	startDate: '',
	endDate: '',
})
const listShow = ref(false)
const dateShow = ref(false)
const dateField = ref(false)
const courseList = ref([])
const classList = ref([])
const pieData = ref([])
const xData = ref(['正常', '迟到', '早退', '旷课', '缺卡', '请假', '补卡'])
const yData = ref([])
const myChartStyle = ref({
	width: '100%',
	height: '400px',
})
const kaoqin = ref([])
//选择时间 确认
const chooseDate = (value) => {
	console.log('dateField', dateField.value)
	console.log('value', value)
	queryParam.value[dateField.value] = dayjs(value.selectedValues).format('YYYY-MM-DD')
	getEchartsData()
	cancelDate()
}
//时间选择关闭
const cancelDate = () => {
	dateShow.value = false
}
//打开时间选择
const pickDate = (item) => {
	dateField.value = item
	dateShow.value = true
}
const infoData = async () => {
	courseList.value = []
	const res = await teacherCourse()
	res.data.forEach((el) => {
		let param = {
			text: el.courseName,
			value: el.id,
		}
		courseList.value.push(param)
	})
	const obj = {}
	const classListArr = res.data.reduce((cur, next) => {
		obj[next.classNo] ? '' : (obj[next.classNo] = true && cur.push(next))
		return cur
	}, [])

	classListArr.forEach((el) => {
		classList.value.push({ text: el.className, value: el.classNo })
	})
	queryParam.value.classNo = classList.value[0].value
	queryParam.value.courseId = courseList.value[0].value
	await getEchartsData()
}
const changeCourse = (value) => {
	queryParam.value.courseId = value
	listShow.value = false
	getEchartsData()
}

const getEchartsData = async () => {
	pieData.value = []
	const res = await allStat(queryParam.value)
	yData.value = res.data
	xData.value.forEach((e, index) => {
		pieData.value.push({
			value: yData.value[index],
			name: e,
		})
	})
	console.log(pieData.value)
	initEcharts()
}

const kaoqinList = async () => {
	const res = await nodeAllList(queryParam.value)
	res.data.forEach((e) => {
		e.attendsTime = dayjs(e.attendsTime).format('YYYY-MM-DD HH:mm:ss')
	})
	kaoqin.value = res.data
	listShow.value = true
}
const initEcharts = () => {
	let classObj = classList.value.find((o) => o.value === queryParam.value.classNo)
	// 基于准备好的dom，初始化echarts实例
	const myChart = echarts.init(document.getElementById('myChart'))
	// 绘制图表
	myChart.setOption({
		title: {
			text: classObj.text,
			left: 'center',
		},
		tooltip: {
			trigger: 'item',
		},
		legend: {
			top: '10%',
			left: 'center',
		},
		series: [
			{
				top: '15%',
				name: '打卡次数',
				type: 'pie',
				data: pieData.value,
				radius: '50%',
				center: ['50%', '50%'],
				label: {
					formatter: function (data) {
						return `${data.name} ${data.value}人`
					},
				},
				itemStyle: {
					color: (param) => {
						const colorList = [
							'#c23531',
							'#2f4554',
							'#61a0a8',
							'#d48265',
							'#91c7ae',
							'#749f83',
							'#ca8622',
						]
						return colorList[param.dataIndex]
					},
				},
			},
		],
	})
	myChart.on('click', (param) => {
		queryParam.value.status = param.dataIndex
		kaoqinList()
	})
	// 监听图表容器的大小并改变图表大小
	window.addEventListener('resize', function () {
		myChart.resize()
	})
}

onMounted(() => {
	infoData()
})
</script>

<template>
	<div class="pages">
		<p class="title">考勤统计</p>
		<div class="content">
			<van-dropdown-menu>
				<van-dropdown-item
					v-model="queryParam.courseId"
					@change="changeCourse"
					:options="courseList"
				/>
				<van-dropdown-item
					v-model="queryParam.classNo"
					@change="changeCourse"
					:options="classList"
				/>
			</van-dropdown-menu>
			<div class="date">
				<van-cell-group class="date-picker" style="display: flex">
					<van-field
						size="large"
						:readonly="true"
						:clearable="true"
						v-model="queryParam.startDate"
						@click="pickDate('startDate')"
						placeholder=""
						left-icon="calendar-o"
					/>
					<span style="line-height: 50px">至</span>
					<van-field
						size="large"
						:readonly="true"
						:clearable="true"
						v-model="queryParam.endDate"
						@click="pickDate('endDate')"
						placeholder=""
						left-icon="calendar-o"
					/>
				</van-cell-group>
			</div>
			<div>
				<van-date-picker
					@confirm="chooseDate"
					@cancel="cancelDate"
					v-if="dateShow"
					type="date"
					title="选择年月日"
					:min-date="minDate"
					:max-date="maxDate"
				/>
			</div>
			<div class="echart" id="myChart" :style="myChartStyle"></div>
			<div class="kaoqin" v-if="listShow">
				<div class="kaoqin-item" v-for="(item, index) in kaoqin" :key="index">
					<div>{{ item.studentName }} ({{ item.studentNo }}){{}}</div>
					<div>{{ item.attendsDate }} ({{ item.weekOfDay }}){{}}</div>
					<div>打卡类型：{{ +item.typeId === 8 ? '上课打卡' : '下课打卡' }}</div>
					<div>打卡时间：{{ item.attendsTime }}</div>
					<div>打卡方式：{{ +item.clockType === 0 ? 'PC端打卡' : '移动端打卡' }}</div>
					<div>考勤状态：{{ xData[queryParam.status] }}</div>
					<hr style="color: #979797" />
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.pages {
	padding-bottom: 34px;
	box-sizing: border-box;
	background: #fff;
	height: 100%;

	.echart {
		margin-top: 30px;
	}

	& > .title {
		font-size: 44px;
		font-family: 'Microsoft YaHei UI', serif;
		font-weight: 400;
		color: #000000;
		letter-spacing: 1px;
		/* text-shadow: 0px 4px 8px #1e96e1; */
		padding: 94px 0 58px;
		text-align: center;
	}

	.content {
		padding: 0 30px;
		box-sizing: border-box;
		height: 100%;
	}

	.date {
		margin-top: 40px;
	}

	.date-picker {
		display: flex;
		justify-items: center;
	}

	.kaoqin {
		width: 100%;
		background: #000000;
		color: #fff;
		font-size: 35px;

		.kaoqin-item {
			padding-top: 20px;
			padding-left: 20px;
			line-height: 40px;
			height: 280px;
		}
	}
}
</style>
